<template>
	<view class="loading-overlay-page">
		<u-overlay class="overlay-uni" :show="show" :opacity="0.7">
			<view class="loading-uni">
				<view class="loading-uni-text" :style="{color: textColor}">{{ loadingText }}</view>
				<view class="loading-uni-icon">			
					<uIconLoading  size="50" :show="show" :color="loadingColor"></uIconLoading>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import uIconLoading from '@/uview-ui/components/u-loading-icon/u-loading-icon.vue'
	
	export default {
		components: {
			uIconLoading
		},
		props: {
			show: {
				type: Boolean,
				default:()=> false
			},
			loadingText: {
				type: String,
				default:()=> '加载中...'
			},
			textColor: {
				type: String,
				default:()=> '#3c9cff'
			},
			loadingColor: {
				type: String,
				default:()=> '#3c9cff'
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.loading-overlay-page {
		
		.overlay-uni {
			display: flex;
			justify-content: center;
			
			.loading-uni {
				height: 200px;
				width: 300px;
				margin: 20px auto;
				display: flex;
				justify-content: center;
				position: relative;
				
				.loading-uni-text {
					position: absolute;
					margin-top: 120px;
					font-weight: bold;
				}
				
				.loading-uni-icon {
					position: absolute;
					margin-top: 60px;
				}
			}
		}
	}
</style>
